<template>
  <div class="user">
    <el-avatar class="el-icon-user-solid" size="small" style="float: left"></el-avatar>
    <div class="userDetail">{{ roleName }}</div>
    <div class="userDetail" style="font-weight: 900">{{ userName }}</div>
  </div>
</template>

<script>
  export default {
    props: {
      roleName: {
        type: String,
        default: "xxx",
      },
      userName: {
        type: String,
      },
    },
  };
</script>

<style>
  .userDetail {
    font-size: 16px;
    float: left;
    margin-left: 10px;
    text-align: center;
  }

  .user {
    margin-bottom: 8%;
    height: 100%;
  }
</style>